// 基本信息
import DialogBox from "@/components/DialogBox";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
import { serviceAuthApply } from "@/api/modules/system/license";
import { showTips } from "@/utils/util";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			// productModel: [{ required: true, message: "请输入产品Code", trigger: "change" }]
		});

		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					if (props.detail.valueType == "number") {
						formData.value = Number(formData.value);
					}
					let { code, message } = await serviceAuthApply({
						appKey: props.detail.appKey,
						authKey: props.detail.authKey,
						appName: props.detail.appName,
						authorityItem: { name: formData.name, value: formData.value, valueType: formData.valueType },
						addInfo: formData.addInfo
					});
					let ok = showTips(code, "授权申请", message);
					if (ok) {
						emit("submit");
					}
				}
			});
		};
		const formData = reactive<any>({
			name: "",
			value: "",
			valueType: "",
			addInfo: ""
		});
		watch(
			() => props.detail,
			() => {
				formData.name = props.detail.name;
				formData.value = props.detail.value;
				formData.valueType = props.detail.valueType;
				formData.addInfo = props.detail.addInfo;
			}
		);
		onMounted(() => {});
		return () => {
			return (
				<DialogBox
					{...attrs}
					width={props.width}
					title={props.title}
					onConfirm={() => {
						validData();
					}}
				>
					<el-form class="logger-detail-form" model={formData} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item label="授权内容">
							{props.detail.valueType == "string" ? <el-input v-model={formData.value}></el-input> : ""}
							{props.detail.valueType == "number" ? <el-input v-model={formData.value} type="number"></el-input> : ""}
							{props.detail.valueType == "date" ? (
								<el-date-picker
									style="width:100%"
									v-model={formData.value}
									type="datetime"
									format="YYYY-MM-DD HH:mm:ss"
									value-format="YYYY-MM-DD HH:mm:ss"
								/>
							) : (
								""
							)}
						</el-form-item>
						<el-form-item label="备注">
							<el-input v-model={formData.addInfo} type="textarea"></el-input>
						</el-form-item>
					</el-form>
				</DialogBox>
			);
		};
	}
});
